<template>
	<!-- 自然人记录详情 -->
	<view class="back" style="height: 100%;height: 100%;">
		<view class="content" style="background-color: #ffffff;">
			<!-- 月份选择区域 -->
			<!--只有法人才会有收入支出导航栏 -->
			<view style="display: flex; justify-content: space-between">
				<!-- swiper-tab -->
				<view class="" style="height: 80rpx">
				</view>
				<!-- display: flex;justify-content: flex-end;margin-top: -50rpx; -->
				<view style="text-align: right">
					<view style="display: flex; align-items: flex-end; justify-content: flex-end">
						<!--  value="{{dataIndex}}" range="{{dateArray}}" disabled="{{disabled}}" -->
						<view @click="bindPickerChange"
							style="width: 170rpx; height: 64rpx; margin-right: 30rpx; margin-bottom: 20rpx">
							<view class="date-select">
								<view class="date-text" style="margin-right: 40rpx">{{detail.month}}月</view>
								<image style="width: 40%; height: 60rpx" src="../static/xiangxia.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
          <!-- 图表区域 -->
			<view style='width: 100%;border: 1px solid #f3f3f3;'>
				<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas" canvas-id="lazy-load-chart" :ec="ec">
				</uni-ec-canvas>
			</view>
			<view style="text-align: center; padding: 50rpx">
				<text v-if="user_type == 2"
					style="font-size: 32rpx; font-weight: bold; color: #000000">{{ currentTab == 0 ? '总收入' : '总支出' }}</text>
				<text v-if="user_type == 1" style="font-size: 32rpx; font-weight: bold; color: #000000;margin-right: 10rpx;">总支出</text>
				<text
					style="font-size: 32rpx; font-weight: bold; color: #ff8a1e; ">{{ detail.above_price ? detail.above_price || 0 : detail.total_above ||0}}人民币元</text>
			</view>
			<!-- 详情最外层区域 -->
			<view class="item">
				<!-- 自然详情记录 -->
				<view v-if="user_type == 1">
					<!-- 自然人参团游 -->
					<view v-if="detail.type_id == 1" class="flex flex-pack-justify flex-align-center warp">
						<view class="flex-1 con">
							<text class="f28 title">参团游</text>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999" style="margin-top: 20rpx">出游时间</text>
								<text class="f28">{{ detail.createtime || '暂无时间' }}</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">出游前旅行社费用</text>
								<text class="f28">{{ detail.travel_price || 0}} 人民币元</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">购物花费</text>
								<text class="f28">{{ detail.shop_total || 0 }} 人民币元</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">邮电通讯</text>
								<text class="f28">{{ detail.telecom || 0 }} 人民币元</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">其它花费</text>
								<text class="f28">{{ detail.other_price || 0 }} 人民币元</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx;margin-bottom: 20rpx">
								<text class="f24 c999">总花费包含人数</text>
								<text class="f28">{{ detail.above || 0}} 人</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">总花费金额</text>
								<text class="f28">{{ detail.above_price || 0}} 人民币元</text>
							</view>
						</view>
					</view>
					<!-- 自然人非参团游 -->
					<view v-if="detail.type_id ==2" class="flex flex-pack-justify flex-align-center warp">
						<view class="flex-1 con">
							<text class="f28 title">非参团游</text>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">开始时间</text>
								<text class="f28">{{ detail.createtime || '暂无时间' }}</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">交通花费</text>
								<text class="f28">{{ detail.trans }} 人民币元</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">住宿花费</text>
								<text class="f28">{{ detail.accomm || 0}} 人民币元</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">购物花费</text>
								<text class="f28">{{ detail.shop_expen || 0}} 人民币元</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">游览花费</text>
								<text class="f28">{{ detail.cost || 0}} 人民币元</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">邮电通讯</text>
								<text class="f28">{{ detail.cations || 0}} 人民币元</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">休闲娱乐花费</text>
								<text class="f28">{{ detail.leisures || 0}} 人民币元</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">其它花费</text>
								<text class="f28">{{ detail.other_tele || 0}} 人民币元</text>
							</view>
							<view
								style="display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 20rpx; margin-bottom: 20rpx">
								<text class="f24 c999">总花费金额</text>
								<text class="f28">{{ detail.total_above || 0}} 人民币元</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 法人记录详情-->
				<view v-if="user_type == 2" class="flex-1 con">
					<!-- 法人记录详情 -->
					<view>
						<view class="detail-back" style="display: flex; margin-bottom: 35rpx">
							<view class="detail-img" style="flex: 1; display: flex; align-items: center">
								<image style="height: 60rpx; width: 60rpx" src="../static/shuidian.png"></image>
							</view>
							<view class="detail-flex" style="width: 100%; flex: 9">
								<view
									style="display: flex; justify-content: space-between; margin-bottom: 20rpx; width: 100%">
									<text style="font-size: 28rpx; font-weight: bold; color: #000000">水电</text>
									<text>{{ detail.water_consumption }}</text>
								</view>
								<u-line-progress active-color="#2979ff" :percent="percentOne"></u-line-progress>
							</view>
						</view>
						<view class="detail-back" style="display: flex; margin-bottom: 35rpx">
							<view class="detail-img" style="flex: 1; display: flex; align-items: center">
								<image style="height: 55rpx; width: 55rpx" src="../static/yingyee.png"></image>
							</view>
							<view class="detail-flex" style="width: 100%; flex: 9">
								<view
									style="display: flex; justify-content: space-between; margin-bottom: 20rpx; width: 100%">
									<text style="font-size: 28rpx; font-weight: bold; color: #000000">营业额</text>
									<text>{{ detail.turnover }}</text>
								</view>
								<u-line-progress active-color="#2979ff" :percent="percentTwo"></u-line-progress>
							</view>
						</view>
						<view class="detail-back" style="display: flex; margin-bottom: 35rpx">
							<view class="detail-img" style="flex: 1; display: flex; align-items: center">
								<image style="height: 55rpx; width: 55rpx" src="../static/yuangong.png"></image>
							</view>
							<view class="detail-flex" style="width: 100%; flex: 9">
								<view
									style="display: flex; justify-content: space-between; margin-bottom: 20rpx; width: 100%">
									<text style="font-size: 28rpx; font-weight: bold; color: #000000">员工工资</text>
									<text>{{ detail.employees_people }}</text>
								</view>
								<u-line-progress active-color="#2979ff" :percent="percentThree"></u-line-progress>
							</view>
						</view>
						<view class="detail-back" style="display: flex; margin-bottom: 35rpx">
							<view class="detail-img" style="flex: 1; display: flex; align-items: center">
								<image style="height: 55rpx; width: 55rpx" src="../static/houqin.png"></image>
							</view>
							<view class="detail-flex" style="width: 100%; flex: 9">
								<view
									style="display: flex; justify-content: space-between; margin-bottom: 20rpx; width: 100%">
									<text style="font-size: 28rpx; font-weight: bold; color: #000000">后勤维修</text>
									<text>{{ detail.logistics_money }}</text>
								</view>
								<!-- uveiw线形进度条 -->
								<u-line-progress active-color="#2979ff" :percent="percentFour"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
				<!-- 联络人什么都不显示 -->
			</view>
		</view>
	</view>
</template>

<script>
	// 此处将路径替换为你放置该组件的路径  
	import uniEcCanvas from '../js_sdk/yanhao-echarts-for-wx/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '../js_sdk/yanhao-echarts-for-wx/uni-ec-canvas/echarts.min.js'
	import util from '../../../utils/util.js';
	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				ec: {//图表数据
					lazyLoad: true,
					option: {
						title: { //标题组件
							textStyle: {
								color: "#333333",
						 	fontSize: 12,
							}
						},
						tooltip: { //设置点击时提示框
							// axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							// 	 type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'  
						 // }  
							trigger: 'item', // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
							position: 'top',
							showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
							hideDelay: 20, // 隐藏延迟，单位ms
							backgroundColor: '#717171', // 提示框背景颜色
							textStyle: {
								fontSize: '16px',
								color: '#FFF' // 设置文本颜色 默认#FFF
							},
							formatter: ' {b} : {c}人民币元 ({d}%)' // formatter设置提示框显示内容// {a}指series.name  {b}指series.data的name// {c}指series.data的value  {d}%指这一部分占总数的百分比
						},
						// legend: {}, 
						legend: {//控制左上角是否显示
								orient: 'horizontal',//图例排列方向
								x: 'left',//上下左右方向
								margin:[0,0,100,0] //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
							 },
						grid: {
							left: '6%',
							right: '6%',
							top: '6%',
							bottom: '6%',
							containLabel: true
						},
						series: [{
							name: '饼状图', //设置饼图名称
							type: 'pie', //设置图表类型
							// silent: fasle, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
							// barWidth:'20',//设置柱宽度
							// radius: [50, 50],//设置饼图大小
							// radius: '70%', //设置饼图大小
							radius: ['30%', '50%'], //设置饼图大小/饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
							// center: ['50%', '50%'],//设置饼图位置
							roseType: 'area',
							data: []
						}]
					}
				},
				// 进度条的状态
				percentOne: 10,
				//水电
				percentTwo: 40,
				//营业额
				percentThree: 60,
				//员工工资
				percentFour: 98,
				//后勤维修
				// 当前设备的宽高
				winWidth: 0,
				winHeight: 0,
				// 收入  支出导航栏切换
				currentTab: 0,
				dataIndex: 0,
				dateArray: '',
				// 详情页ID
				id: '',
				// 自然人 法人 联络人类型
				user_type: 1,
				type_id: '', //自然人的参团  1，非参团 2
				col: '',
				//1  自然人  2  法人
				// 类型人传递参数赋值
				user_type_food: '',
				keyword: '',
				// 详情数据
				detail: {},
				// 获取指标信息传递的month月份
				month: '',//月份
				// 禁止月份
				disabled: false,
			}
		},
		onReady() {
			setTimeout(() => { //初始化图表
				this.$refs['canvas'].init()
			}, 1000) // 两秒之后延迟加载  
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			console.log('获取传过来的详情记录获取传过来的详情记录获取传过来的详情记录获取传过来的详情记录', options)
			// this.initChart()
			var that = this;
			/**
			 * 获取当前设备的宽高
			 */
			//  uni.getSystemInfo({   暂时先不要删除， 后续可能会用到
			//      success: function (res) {
			// this.winWidth=res.windowWidth,
			// this.winHeight=res.windowHeight
			//      }
			//  });

			if (options) {
				this.options = options
				this.user_type = options.user_type
				this.type_id = options.type_id
				if (options.user_type == 1) {
					this.user_type_food = '自然人'
				} else {
					this.user_type_food = '法人'
				}

			}
			// 获取详情数据
			this.getBillDetails(options);
		},
		onShow() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			// 图表函数
			hrFun: function(textTitle, data) {
				
				var _self = this
				_self.ec.option.title = [{
					text: textTitle?textTitle:0 + '人民币元',
					x: 'center',
					top: '42%', //控制中间字体距离上下边距
					textStyle: {
						color: '#666',
						fontSize: 13,
						fontWeight: 'bold',
					}
				}, {
					text: '总计',
					x: 'center',
					top: '50%', //控制中间字体距离上下边距
					textStyle: {
						fontSize: 15,
						color: '#666',
					},
				}],
				_self.ec.option.toolbox = {
					show: true//工具兰是否显示
				} 
				_self.ec.option.series[0].data = data
			},
			// 收入 支出tab切换逻辑
			tabbarChange: function(e) {
				var that = this;
				if (this.currentTab === e.currentTarget.dataset.id) {
					return false;
				} else {
					this.currentTab = e.currentTarget.dataset.id
				}
			},

			// 月份选择
			bindPickerChange: function(e) {
				uni.showToast({
					title: '不支持更换月份',
					icon: 'none',
					duration: 1000
				});
			},
			// 获取详情数据
			getBillDetails(options) {
				var _self = this;
				uni.showToast({
					title: '加载中...',
					icon: 'loading',
					duration: 1000
				});
				if (options) {
					var id = options.id
					var user_type = options.user_type == 1 ? '自然人' : '法人'
					var month = options.month
					//自然人    //法人
					var keyword = options.col == 1 ? 'totel' : 'turnover'
					var type_id = options.type_id
					console.log('传递的详情参数', id, user_type, month, keyword)
					uni.request({
						method: 'POST',
						url: 'https://jizhang.xqyu.cn/index.php/api/index/get_bill_details',
						dataType: 'json',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							id: id,
							user_type: user_type,
							keyword: keyword,
							month: month,
							type_id: type_id
						},
						success: function(res) {
							console.log('获取最终结果',res.data.data)
							// 数据加载完成，隐藏弹窗
							uni.hideLoading();
							if (res.data.code == 1) {
								// // 时间格式化
								let time = util.timestampToTime(res.data.data.createtime);
								res.data.data.createtime = time
								res.data.data.other_price = res.data.data.other_price ? res.data.data
									.other_price.split('-')[0] : 0
								res.data.data.other_tele = res.data.data.other_tele ? res.data.data.other_tele
									.split('-')[0] : 0
								_self.detail = res.data.data
								if(res.data.data.type_id==1){//如果该详情数据是参团游走以下逻辑
									let obj = { //图表赋值
										value1: res.data.data.travel_price, //出行前旅行社费用
										value2: res.data.data.shop_total, //购物花费
										value2: res.data.data.telecom, //邮电花费
										value3: res.data.data.other_price, //其它花费
										value6: res.data.data.above_price, //总花费金额
									}
									let textTitle = res.data.data.above_price
									var data=[]
									let obj1={
											value: res.data.data.travel_price,
											name: '出行前旅行社费用'
										}
									let obj2={
										value: res.data.data.shop_total || 0,
										name: '购物花费'
									}
									let obj3={
										value: res.data.data.telecom,
										name: '邮电通讯'
									}
									let obj4={
										value: res.data.data.other_price,
										name: '其它花费'
									}
									res.data.data.travel_price==0?'':data.push(obj1)
									res.data.data.other_price==0?'':data.push(obj4)
									res.data.data.shop_total==0?'':data.push(obj2)
									res.data.data.telecom==0?'':data.push(obj3)
									console.log('最终得到的图标数组最终得到的图标数组最终得到的图标数组',data)
									let sendData=[]
									data.forEach(item=>{
										if(item.value!==null){
											sendData.push(item)
										}
									})
									console.log('最终渲染',sendData)
									_self.hrFun(textTitle, sendData)
								}else{//如果该详情数据是非参团游走以下逻辑
									let obj = { //图表赋值
										value1: res.data.data.travel_price, //出行前旅行社费用
										value2: res.data.data.shop_total, //购物花费
										value2: res.data.data.telecom, //邮电花费
										value3: res.data.data.other_price, //其它花费
										value6: res.data.data.above_price, //总花费金额
									}
									let textTitle = res.data.data.total_above || 0
									var data=[]
									let list1={
											value: res.data.data.accomm,
											name: '住宿花费'
										}
									let list2={
											value: res.data.data.trans,
											name: '交通花费'
										}
									let list3={
											value: res.data.data.shop_expen,
											name: '购物花费'
										}
									let list4={
											value: res.data.data.cost,
											name: '游览花费'
										}
									let list5={
											value: res.data.data.leisures,
											name: '休闲娱乐花费'
										}
									let list7={
											value: res.data.data.other_tele,
											name: '其它花费'
										}
									let list8={
										value: res.data.data.cations,
										name: '邮电通讯'
									}
									res.data.data.accomm==0?'':data.push(list1)
									res.data.data.trans==0?'':data.push(list2)
									res.data.data.shop_expen==0?'':data.push(list3)
									res.data.data.cost==0?'':data.push(list4)
									res.data.data.leisures==0?'':data.push(list5)
									res.data.data.other_tele==0?'':data.push(list7)
									res.data.data.cations==0?'':data.push(list8)
									console.log('获取非参团图表',data)
									_self.hrFun(textTitle, data)
								}
							}
						}
					});
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	// 设置图表的宽高
	.uni-ec-canvas {
		width: 680rpx;
		height: 600rpx;
		display: block;
	}

	.chart-wrap {
		width: 100%;
		height: 500rpx;
		display: block;
		margin-top: 30rpx;
	}

	.content {
		padding: 30rpx;
	}

	.year {
		text-align: right;
		display: block;
	}

	.month {
		text-align: right;
	}

	.chart {
		margin-top: 50rpx;
	}

	.chart image {
		width: 100% !important;
		height: 360rpx !important;
	}

	.zhichu {
		font-weight: bold;
		margin-top: 50rpx;
	}

	.zhichu text {
		color: #ff8a1e;
	}

	.item {
		margin-top: 40rpx;
	}

	.week text {
		margin-right: 30rpx;
	}

	.con text {
		display: block;
	}

	.warp {
		margin-top: 20rpx;
		padding-bottom: 30rpx;
	}

	.title {
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.chart image {
		width: 40% !important;
		height: 60rpx !important;
	}

	.chart {
		margin-top: 50rpx;
	}

	.chart text {
		font-weight: bold;
	}

	.date-select {
		display: flex;
		align-items: center;
		color: #666;
		padding: 0 15rpx;
		font-size: 24rpx;
		line-height: 46rpx;
		background-color: #eee;
		border-radius: 4rpx;
	}

	.date-text {
		width: 90rpx;
		overflow: hidden;
	}

	/* .date-select image{width: 24rpx;height: 24rpx;} */
	.chart-wrap {
		height: 360rpx;
	}

	.chart-wrap ec-canvas {
		width: 100%;
		height: 100%;
	}

	.on {
		color: #333333 !important;
	}

	.swiper-tab-list {
		font-size: 30rpx;
		font-weight: bold;
		color: #666666;
		line-height: 35px;
	}

	.jiao {
		width: 0;
		height: 0;
		border-right: 10rpx solid transparent;
		border-left: 10px solid transparent;
		border-bottom: 10px solid yellow;
	}

	.swiper-tab {
		display: flex;
	}

	.detail-back {
		display: flex;
	}
</style>
